<template>
  <ele-page flex-table style="padding: 0 0 0 5px;">
    <!-- 表格 -->
    <ele-pro-table
      ref="tableRef"
      v-model:selections="selections"
      row-key="id"
      :columns="columns"
      :datasource="datasource"
      :show-overflow-tooltip="true"
      :pagination="false"
      highlight-current-row
      :default-expand-all="false"
      :tree-props="{ checkStrictly: true }"
    >
      <template #toolbar>
        <el-button type="primary" class="ele-btn-icon" icon="IconElPrinter" plain @click="openPrint()">
          批量打印
        </el-button>

        <el-divider direction="vertical" />
        <el-button
          class="ele-btn-icon"
          :icon="ColumnHeightOutlined"
          @click="expandAll"
        >
          展开全部
        </el-button>
        <el-button
          class="ele-btn-icon"
          :icon="VerticalAlignMiddleOutlined"
          @click="foldAll"
        >
          折叠全部
        </el-button>
      </template>
      <template #status="{ row }">
        <el-tag v-if="row.status === 1">正常</el-tag>
        <el-tag v-else type="danger">停用</el-tag>
      </template>
      <template #action="{ row }">
        <el-link type="primary" underline="never" @click="openPrint(row)">
          打印
        </el-link>
      </template>
    </ele-pro-table>

    <PagePrint
      v-model="showPrint"
      :printList="printList"
      :warehouseId="warehouseId"
    />
  </ele-page>
</template>

<script setup>
import {
  ColumnHeightOutlined,
  VerticalAlignMiddleOutlined,
} from '@/components/icons'

import { toTree } from 'ele-admin-plus/es'
import { ref } from 'vue'
import PagePrint from './print.vue'

const props = defineProps({
  warehouseId: Number,
})

/** 表格实例 */
const tableRef = useTemplateRef('tableRef')

/** 表格选中数据 */
const selections = ref([])

const treeSelect = ref([])

const printList = ref([])

/** 是否显示打印弹窗 */
const showPrint = ref(false)

/** 表格列配置 */
const columns = ref([
  {
    type: 'selection',
    columnKey: 'selection',
    width: 40,
    align: 'center',
    fixed: 'left',
    showOverflowTooltip: false,
  },
  {
    type: 'index',
    label: '序',
    width: 50,
    align: 'center',
    fixed: 'left',
  },
  {
    prop: 'name',
    label: '仓库名称',
  },
  {
    prop: 'type_name',
    label: '类型',
    align: 'center',
  },
  {
    slot: 'status',
    label: '状态',
    align: 'center',
    formatter: row => row.status === 1 ? '正常' : '禁用',
  },
  {
    prop: 'create_time',
    label: '创建时间',
    sortable: 'custom',
    formatter: (row) => {
      return utils.formatDate(row.create_time)
    },
    align: 'center',
  },
  {
    columnKey: 'action',
    label: '操作',
    align: 'center',
    slot: 'action',
    fixed: 'right',
    width: 120,
  },
])

/** 表格数据源 */
async function datasource({ where, orders }) {
  const res = await utils.get('/warehouseLocation/index', { ...where, ...orders, warehouse_id: props.warehouseId })
  treeSelect.value = toTree({
    data: res.data.filter(v => v.level < 3),
    idField: 'id',
    parentIdField: 'pid',
  })
  return toTree({
    data: res.data,
    idField: 'id',
    parentIdField: 'pid',
  })
}

/** 搜索 */
function reload(where) {
  selections.value = []
  tableRef.value?.reload?.({ page: 1, where })
}

/** 展开全部 */
function expandAll() {
  tableRef.value?.toggleRowExpansionAll?.(true)
}

/** 折叠全部 */
function foldAll() {
  tableRef.value?.toggleRowExpansionAll?.(false)
}

/** 打开打印弹窗 */
function openPrint(row) {
  printList.value = row ? [row] : selections.value
  showPrint.value = true
}

// 监听字典id变化
watch(
  () => props.warehouseId,
  () => {
    reload({})
  },
)
</script>
